<template>
  <view class="search__hot" v-if="datas.length > 0">
    <view class="search__hot-header">热门搜索</view>
    <div :class="['search__hot-container', `left${4 - (datas.length % 4)}`]">
      <navigator
        class="search__hot-item"
        v-for="item in datas"
        :key="item._id"
        :url="`/pages/bookdetail/index?id=${item.book._id}`"
      >
        <image :src="item.book.img_url" alt="图片" />
        <text>{{ item.recommend_text }}</text>
      </navigator>
    </div>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import { get } from '@/utils';
import { platformName } from '@/config';

export default {
  computed: {
    ...mapGetters(['settings']),
    isOpenHideMode() {
      return (
        get(this.settings, 'is_open_hide_mode', false) &&
        platformName === 'mp-weixin'
      );
    },
  },

  data() {
    return {
      datas: [],
    };
  },

  created() {
    if (this.isOpenHideMode) return;
    this.fetchHotSearch();
  },

  methods: {
    // 加载热门搜索
    fetchHotSearch() {
      // 定义热门搜索关键字，可以自己实现ajax请求数据再赋值
      this.hotSearchList = [];
      this.$http({
        method: 'GET',
        url: '/api/front/hot-search',
        needAuth: false,
        skipToast: true,
      }).then((res) => {
        if (res.ok) {
          this.datas = res.data.list;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.search__hot {
  &-header {
    width: 100%;
    padding: 10rpx 24rpx;
    font-size: 32rpx;
    color: #333;
    box-sizing: border-box;
    margin-top: 20rpx;

    &::before {
      content: ' ';
      display: inline-block;
      width: 6rpx;
      height: 28rpx;
      background: #4990e2;
      vertical-align: middle;
      position: relative;
      top: -4rpx;
      margin-right: 8rpx;
    }
  }

  &-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10rpx 24rpx;

    &.left1::after {
      content: ' ';
      width: 150rpx;
      width: calc((100vw - 64px) / 4);
    }
    &.left2::after {
      content: ' ';
      width: 150rpx;
      width: calc((100vw - 64px) / 2);
    }
    &.left3::after {
      content: ' ';
      width: 150rpx;
      width: calc((100vw - 64px) / 3);
    }
  }

  &-item {
    // width: 25%;
    margin-bottom: 24rpx;

    & > image {
      width: 150rpx;
      width: calc((100vw - 64px) / 4);
      height: 218rpx;
    }

    & > text {
      width: 160rpx;
      font-size: 22rpx;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
